<template>
    <div class="realTimeStatus" :style="{transform:'scale('+scaleNum+')','transform-origin':'0px 0px'}">
        <div class="title">
            <div class="titleSpan"><span>设备实时状态看板</span></div>
            <div class="timer"><span>{{time}}</span></div>
        </div>
        <div class="content">
            <div class="leftCol">
                <div class="leftOne">
                    <div class="titleName">
                        <span>设备状态分析</span>
                    </div>
                    <div class="leftContent">
                        <div class="devnum">
                            <span class="devTitle">所有设备总数</span>
                            <span class="devCount">{{statusObj.sum}}</span>
                        </div>
                        <div class="leftStatus">
                            <Row>
                                <Col span="12" align="left">
                                    <span class="statusfont">运行</span>
                                </Col>
                                <Col span="12" align="left">
                                    <span class="statusNumfont">{{statusObj.runSum}}台</span>
                                </Col>
                                <Col span="12" align="left">
                                    <span class="statusfont">待机</span>
                                </Col>
                                <Col span="12" align="left">
                                    <span class="statusNumfont">{{statusObj.standbySum}}台</span>
                                </Col>
                                <Col span="12" align="left">
                                    <span class="statusfont">报警</span>
                                </Col>
                                <Col span="12" align="left">
                                    <span class="statusNumfont">{{statusObj.waringSum}}台</span>
                                </Col>
                                <Col span="12" align="left">
                                    <span class="statusfont">关机</span>
                                </Col>
                                <Col span="12" align="left">
                                    <span class="statusNumfont">{{statusObj.shutdownSum}}台</span>
                                </Col>
                            </Row>
                        </div>
                    </div>
                </div>
                <div class="leftTwo">
                    <div class="titleName">
                        <span>过去7天设备开动率趋势</span>
                    </div>
                    <div id="sevenOpenRate" class="optionEchart">

                    </div>
                </div>
                <div class="leftThree">
                    <div class="titleName">
                        <span>过去7天设备停机损失分析</span>
                    </div>
                    <div class="colTitle">
                        <span class="iconTitle">
                            <img width="21px" src="~images/bigScreen/performance/lineIcon.png" alt />
                            <span>累计占比</span>
                        </span>
                        <span class="iconTitle">
                            <strong class="iconGreen"></strong>
                            <span>停机时长</span>
                        </span>
                    </div>
                    <div class="colContent">
                        <div id="platoEchartDiv" class="echartDiv">
                            
                        </div>
                    </div>
                </div>
            </div>
            <div class="rightCol">
                <div class="titleName">
                    <span>设备实时状态</span>
                </div>
                <div class="devList">
                    <div class="devBorder" v-for="(item,index) of devStatusList" :key="index">
                        <div class="devBoxtitle">
                            <div class="machineNo">
                                <span>{{item.deviceNo}}</span>
                            </div>
                            <div class="machineStatus">
                                <span>当前状态：</span>
                                <span>持续时长：</span>
                            </div>
                            <div class="machineStatus1">
                                <span :style="item.statusString==='运行'?'color:rgb(48,195,104)':item.statusString==='待机'
                                ?'color:rgb(243,154,0)':item.statusString==='报警'?'color:rgb(233,52,70)':item.statusString==='关机'
                                ?'color:rgb(130,130,130)':''">{{item.statusString}}</span>
                                <span>{{item.duration}}</span>
                            </div>
                            <div class="machinelight">
                                <img width="27px" v-show="item.statusString==='运行'" src="~images/bigScreen/realTimeStatus/green.png" alt />
                                <img width="27px" v-show="item.statusString==='待机'" src="~images/bigScreen/realTimeStatus/yellow.png" alt />
                                <img width="27px" v-show="item.statusString==='报警'" src="~images/bigScreen/realTimeStatus/red.png" alt />
                                <img width="27px" v-show="item.statusString==='关机'" src="~images/bigScreen/realTimeStatus/dark.png" alt />
                            </div>
                        </div>
                        <div class="devBoxContent">
                            <div class="devEchart">
                                <div class="devboxEchart" :id="'devOpenRate'+index">

                                </div>
                                <div class="openRateNum">
                                    <span>{{item.startRate}}%</span>
                                </div>
                                <div class="openRateName">
                                    <span>设备开动率</span>
                                </div>
                            </div>
                            <div class="devTimeRate">
                                <div class="slicefig" >
                                    <div class="sliceDetail" v-for="(item1,index1) of item.stateList" :key="'after'+index1" :style="item1 | formatStyle"></div>
                                </div>
                                <div class="pieTime">
                                    <Row>
                                        <Col span="8" align="center">
                                            <strong class="iconGreen"></strong>
                                            <span class="darmfont">运行</span>
                                        </Col>
                                        <Col span="8" align="center">
                                            <span>{{item.runProp}}%</span>
                                        </Col>
                                        <Col span="8" align="center">
                                            <span>{{item.runTime}}分钟</span>
                                        </Col>
                                        <Col span="8" align="center">
                                            <strong class="iconYellow"></strong>
                                            <span class="darmfont">待机</span>
                                        </Col>
                                        <Col span="8" align="center">
                                            <span>{{item.standbyProp}}%</span>
                                        </Col>
                                        <Col span="8" align="center">
                                            <span>{{item.standbyTime}}分钟</span>
                                        </Col>
                                        <Col span="8" align="center">
                                            <strong class="iconRed"></strong>
                                            <span class="darmfont">报警</span>
                                        </Col>
                                        <Col span="8" align="center">
                                            <span>{{item.waringProp}}%</span>
                                        </Col>
                                        <Col span="8" align="center">
                                            <span>{{item.waringTime}}分钟</span>
                                        </Col>
                                        <Col span="8" align="center">
                                            <strong class="iconDark"></strong>
                                            <span class="darmfont">关机</span>
                                        </Col>
                                        <Col span="8" align="center">
                                            <span>{{item.shutdownProp}}%</span>
                                        </Col>
                                        <Col span="8" align="center">
                                            <span>{{item.shutdownTime}}分钟</span>
                                        </Col>
                                    </Row>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import * as echarts from 'echarts';
let moment = window.$this.moment;
export default {
    name: "realTimeStatus",
    components: {},
    data(){
        return{
            time: this.$moment(new Date()).format('YYYY-MM-DD HH:mm:ss'),
            statusObj:{},
            pageNum:1,
            pageSize:9,
            devStatusList:[],
            pages:0
        }
    },
    mounted(){
        this.timer1 = setInterval(this.refreshTime, 1000);
        this.getDevList()
        this.timer2 = setInterval(this.autoNextPage, 15000);
        this.autoChange()
        this.timer3 = setInterval(this.autoChange, 15000);
        this.onresize()
        window.addEventListener('resize', this.onresize, false);
    },
    methods:{
        onresize(){
            const Width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
            const Height = window.innerHeight || document.documentElement.clientWidth || document.body.clientHeight;
            const scaleW = Width < 1920 ? (Width /  1920) : 1;
            const scaleH = Height < 1080 ? (Height / 1080) : 1;
            this.scaleNum = scaleW > scaleH ? scaleH : scaleW
        },
        autoNextPage(){
            this.pageNum+=1
            if(this.pageNum>this.pages){
                this.pageNum = 1
            }
            this.getDevList()
        },
        autoChange(){
            this.getOpenRate()
            this.getPlato()
            this.getStatusNum()
        },
        refreshTime(){
            this.time = this.$moment(new Date()).format('YYYY-MM-DD HH:mm:ss');
        },
        //设备列表
        getDevList(){
            this.axios({
                method: 'get',
                url: '/dms/equipRealtimeStatus/allDeviceRealtimeStatusPage',
                params: {
                    pageNum:this.pageNum,
                    pageSize:this.pageSize,
                    type:6
                }
            }).then(res => {
                if(res.code === 200){
                    this.devStatusList = []
                    this.pages = res.data.pages
                    for(let obj of res.data.list){
                        let total = moment(obj.stateHistoryDtoList[obj.stateHistoryDtoList.length-1].endTime)-moment(obj.stateHistoryDtoList[0].startTime)
                        let stateList = obj.stateHistoryDtoList.map((item)=>{
                            let widthValue = (moment(item.endTime)-moment(item.startTime))/total*100
                            return {...item,'Width':widthValue,};
                        })
                        obj = {...obj,stateList}
                        this.devStatusList.push(obj)
                    }
                    this.$nextTick(()=>{
                        for(let i =0;i<this.devStatusList.length;i++){
                            this.openRateEchart(this.devStatusList[i].startRate,i)
                        }
                    })
                }else{
                    this.$Message.warning(({content:res.msg,duration:6,closable:true}));
                }
            })
        },
        openRateEchart(startRate,index){
            let myChart = echarts.init(document.getElementById("devOpenRate"+index));
            let indColor = '58,236,237'
            if(startRate<50){
                indColor = '201,38,55'
            }
            if(startRate>=50&&startRate<85){
                indColor = '255,185,1'
            }
            if(startRate>=85){
                indColor = '58,236,237'
            }
            myChart.setOption({ 
                series: [
                    {
                        name: "外部线",
                        type: "gauge",
                        radius: '90%', // 动态
                        startAngle: 210,
                        endAngle: -30,
                        axisLine: {
                            lineStyle: {
                                color: [
                                    [1, 'rgba('+indColor+',0.5)'] // 动态
                                ],
                                width: 1
                            }
                        },
                        axisLabel: {
                            show: false
                        },
                        axisTick: {
                            show: false
                        },
                        splitLine: {
                            show: false
                        },
                        detail: {
                            show: false
                        },
                    },
                    // 阴影
                    {
                        name: "内部阴影",
                        type: "gauge",
                        radius: '80%',
                        z: 10,
                        startAngle: 210,
                        endAngle: -30,
                        splitNumber: 10,
                        axisLine: {
                            lineStyle: {
                            color: [
                                [startRate / 100, new echarts.graphic.LinearGradient(
                                0, 1, 0, 0, [{
                                    offset: 0,
                                    color: 'rgba('+indColor+',0.0)'
                                }, {
                                    offset: 0.8,
                                    color: 'rgba('+indColor+',0.5)'
                                }, {
                                    offset: 1,
                                    color: 'rgba('+indColor+',0.8)'
                                }
                                ]
                                )],
                                [
                                1, 'rgba('+indColor+',0.0)'
                                ]
                            ],
                            width: 100
                            }
                        },
                        axisLabel: {
                            show: false
                        },
                        axisTick: {
                            show: false
                        },
                        splitLine: {
                            show: false
                        },
                        itemStyle: {
                            show: false
                        },
                        detail: {
                            show: false
                        },
                        title: { //标题
                            show: false
                        },
                        data: [{
                            name: "",
                            value: startRate
                        }],
                        pointer: {
                            show: false
                        }
                    },
                    {
                        name: "数据",
                        type: "gauge",
                        radius: '80%',
                        splitNumber: 12,
                        z: 7,
                        startAngle: 210,
                        endAngle: -30,
                        axisLine: {
                            lineStyle: {
                            color: [
                                [startRate / 100, 'rgba('+indColor+',1)'], // 动态
                                [1, 'rgba('+indColor+',0.5)']
                            ],
                            width: 8
                            }
                        },
                        tooltip: {
                            show: false
                        },
                        axisLabel: {
                            show: false
                        },
                        axisTick: {
                            show: false
                        },
                        splitLine: {
                            distance: -8,
                            length: 8,
                            lineStyle: {
                                color: 'rgba(11,50,121,1)',
                                width: 3
                            }
                        },
                        detail: {
                            show: false,
                        },
                        pointer: {
                            show: true,
                            width: 3,
                            length: "100%",
                        },
                        itemStyle: {  //设置仪表盘指针样式
                            color: 'rgba('+indColor+',1)',  //设置指针颜色，默认(auto)取数值所在的区间的颜色
                        },
                        data: [{
                            value: startRate,
                        }]
                    },
                ]
            });
            window.addEventListener("resize", function () {
                myChart.resize(); //myChart指自己定义的echartsDom对象
            });
        },
        //状态数量
        getStatusNum(){
            this.axios({
                method: 'get',
                url: '/dms/equipRealtimeStatus/allDeviceStatus',
                params: {}
            }).then(res => {
                if(res.code === 200){
                    this.statusObj = res.data
                }else{
                    this.$Message.warning(({content:res.msg,duration:6,closable:true}));
                }
            })
        },
        //柏拉图
        getPlato(){
            this.axios({
                method: 'get',
                url: '/dms/mShutdown/top5ratio',
                params: {}
            }).then(res => {
                if(res.code === 200){
                    let xArr = res.data.map(item => {
                        return item.reason
                    })
                    let leftData = res.data.map(item => {
                        return item.minute
                    })
                    let rightData = res.data.map(item => {
                        return item.ratio
                    })
                    this.platoEchart(xArr,leftData,rightData,Math.max.apply(null,leftData),Math.max.apply(null,rightData));
                }else{
                    this.$Message.warning(({content:res.msg,duration:6,closable:true}));
                }
            })
        },
        platoEchart(xArr,leftData,rightData,max1,max2){
            let myChart = echarts.init(document.getElementById("platoEchartDiv"));
            myChart.setOption({ 
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'cross',
                    },
                },
                color:['rgb(48,195,104)','rgb(228,168,46)',],//绿黄
                grid: {
                    //图的边距
                    top: '20%', //左边距
                    left: '6%', //左边距
                    right: '8%', //右边距
                    bottom: '10%', //下边距
                    containLabel: true
                },
                xAxis: [
                    {
                    type: 'category',
                    data: xArr,
                    axisPointer: {
                        type: 'shadow'
                    },
                    axisTick: {
                        show: false
                    },
                    axisLabel: {
                        
                        color:"rgb(202, 202, 202)"
                    },
                    }
                ],
                yAxis: [
                    {
                    type: 'value',
                    min: 0,
                    max: max1,
                    name: '单位:分钟',
                    axisLabel: {
                        formatter: '{value}'
                    },
                    splitLine: {
                        show: false
                    },
                    // nameTextStyle: {
                    //     padding: [0, 55, 0, 0] // 上右下左与原位置距离
                    // },
                    },
                    {
                    type: 'value',
                    min: 0,
                    max: 100,
                    axisLabel: {
                        formatter: '{value}%'
                    },
                    splitLine: {
                        show: false
                    }
                    },
                ],
                series: [
                    {
                        name: '停机时长',
                        type: 'bar',
                        tooltip: {
                            valueFormatter: function (value) {
                            return value + '分';
                            }
                        },
                        data: leftData,
                        barWidth:30,
                    },
                    {
                        name: '累计占比',
                        type: 'line',
                        yAxisIndex: 1,
                        tooltip: {
                            valueFormatter: function (value) {
                                return value + '%';
                            }
                        },
                        data: rightData
                    },
                ]
            });
            window.addEventListener("resize", function () {
                myChart.resize(); //myChart指自己定义的echartsDom对象
            });
        },
        //开动率
        getOpenRate(){
            this.axios({
                method: 'get',
                url: '/dms/equipRealtimeStatus/allDeviceStartRateSeven',
                params: {type:6}
            }).then(res => {
                if(res.code === 200){
                    let xDay=Object.keys(res.data).map((item)=>{
                        return item.substring(5,10);
                    })
                    this.sevenOpenRateChart(xDay,Object.values(res.data))
                }else{
                    this.$Message.warning(({content:res.msg,duration:6,closable:true}));
                }
            })
        },
        sevenOpenRateChart(xDay,yData) {
                let myChart = echarts.init(document.getElementById("sevenOpenRate"));
                myChart.setOption({
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'cross',
                        },
                    },
                    grid: {
                        //图的边距
                        top: '20%', //左边距
                        left: '4%', //左边距
                        right: '8%', //右边距
                        bottom: '10%', //下边距
                        containLabel: true
                    },
                    xAxis: {
                        type: 'category',
                        boundaryGap: false,
                        data: xDay,
                        axisTick: {//去掉刻度
                            show: false
                        },
                        axisLabel: {
                            color:"rgb(202, 202, 202)"
                        },
                    },
                    yAxis: {
                        type: 'value',
                        min: 0,
                        max: 100,
                        axisLabel:{
                            formatter: '{value}%'
                        },
                        splitLine:{//去掉网格线
                            show:false
                        },
                        axisTick: {//去掉刻度
                            show: false
                        }
                    },
                    series: [
                        {
                        data: yData,
                        type: 'line',
                        itemStyle: {
                            color: 'rgb(25,141,173)'
                        },
                        areaStyle: {
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                            {
                                offset: 0,
                                color: 'rgba(25,141,173,0.8)'
                            },
                            {
                                offset: 1,
                                color: 'rgba(25,141,173,0)'
                            }
                            ])
                        },
                        }
                    ]
                });
                window.addEventListener("resize", function () {
                    myChart.resize(); //myChart指自己定义的echartsDom对象
                });
            },
    },
    filters: {
        formatStyle (item) {
            let style = ''
            switch (item.state) {
                case 1:
                    style = 'background: #30c368;';
                    break;
                case 2:
                    style = 'background: #f39a00;';
                    break;
                case 4:
                    style = 'background: #6d95b5;';
                    break;
                case 5:
                    style = 'background: #e93446;';
                    break;
                default:
                    style = 'background: #6d95b5;';
            }
            return 'width: '+ item.Width +'%;'+style;
        },
    },
    beforeDestroy() {
        clearInterval(this.timer1);
        clearInterval(this.timer2);
        clearInterval(this.timer3);
        window.removeEventListener('resize', this.onresize, false);
    }
}
</script>

<style scoped lang="scss">
.realTimeStatus{
    background: url(~images/bigScreen/realTimeStatus/bg.png) no-repeat;
    background-size: cover;
    height: 1080px;
    width: 1920px;
    position: relative;
    overflow: hidden;
    .title{
        margin-top: 14px;
        background: url(~images/bigScreen/realTimeStatus/header.png) no-repeat;
        background-size: cover;
        height: 68px;
        width: 1920px;
        display:flex;
        justify-content: space-between;
        .titleSpan{
            margin-left: 100px;
            span{
                font-size: 30px;
                color: rgb(236,248,250);
                line-height:40px
            }
        }
        .timer{
            margin-right: 30px;
            span{
                font-size: 24px;
                color: rgb(236,248,250);
                line-height:40px;
                font-family: 'digifacewide';
            }
        }
    }
    .content{
        padding-top: 20px;
        display:flex;
        justify-content: space-around;
        .leftCol{
            display:flex;
            flex-direction: column;
            justify-content: space-between;
            .leftOne{
                background: url(~images/bigScreen/realTimeStatus/leftOne.png) no-repeat;
                background-size: cover;
                height: 236px;
                width: 535px;
                display:flex;
                flex-direction: column;
                .titleName{
                    width: 206px;
                    height: 74px;
                    text-align: center;
                    span{
                        font-size: 20px;
                        color: rgb(236,248,250);
                        line-height:46px
                    }
                }
                .leftContent{
                    height: 161px;
                    display:flex;
                    .devnum{
                        height: 100%;
                        width: 50%;
                        display:flex;
                        flex-direction: column;
                        justify-content:center;
                        align-items: center;
                        .devCount{
                            font-size: 30px;
                            color: rgb(21,218,254);
                        }
                        .devTitle{
                            color: rgb(236,248,250);
                            font-size: 16px;
                        }
                    }
                    .leftStatus{
                        height: 100%;
                        width: 50%;
                        display:flex;
                        flex-direction: column;
                        justify-content:center;
                        align-items: center;
                        .statusfont{
                            color: rgb(175, 175, 175);
                            font-size: 16px;
                            line-height: 30px;
                        }
                        .statusNumfont{
                            color: rgb(236,248,250);
                            font-size: 20px;
                        }
                    }
                }
            }
            .leftTwo{
                background: url(~images/bigScreen/realTimeStatus/leftTwo.png) no-repeat;
                background-size: cover;
                height: 315px;
                width: 535px;
                .titleName{
                    width: 301px;
                    text-align: center;
                    span{
                        font-size: 20px;
                        color: rgb(236,248,250);
                        line-height:46px
                    }
                }
                .optionEchart{
                    height: 270px;
                }
            }
            .leftThree{
                background: url(~images/bigScreen/realTimeStatus/leftThree.png) no-repeat;
                background-size: cover;
                height: 358px;
                width: 535px;
                .titleName{
                    width: 320px;
                    text-align: center;
                    span{
                        font-size: 20px;
                        color: rgb(236,248,250);
                        line-height:46px
                    }
                }
                .colTitle{
                    width: 100%;
                    display:flex;
                    justify-content:flex-end;
                    padding-right: 30px;
                    .iconTitle{
                        color: rgb(202, 202, 202);
                        font-size: 14px;
                        line-height: 40px;
                        margin-left: 20px;
                        img{
                            margin-right: 10px;
                        }
                        strong{
                            width: 10px;
                            height: 10px;
                            display: inline-block;
                            margin-right: 10px;
                        }
                        .iconGreen{
                            background: rgb(48,195,104);
                        }
                    }
                }
                .colContent{
                    width: 100%;
                    height: 271px;
                    .echartDiv{
                        width: 100%;
                        height: 100%;
                    }
                }
            }
        }
        .rightCol{
            background: url(~images/bigScreen/realTimeStatus/rightCol.png) no-repeat;
            background-size: cover;
            height: 954px;
            width: 1314px;
            display:flex;
            flex-direction: column;
            .titleName{
                width: 206px;
                text-align: center;
                span{
                    font-size: 20px;
                    color: rgb(236,248,250);
                    line-height:46px
                }
            }
            .devList{
                display:flex;
                flex-wrap: wrap;
                // justify-content:space-around;
                padding: 10px 0px 10px 15px;
                .devBorder{
                    background: url(~images/bigScreen/realTimeStatus/devBorder.png) no-repeat;
                    background-size: cover;
                    height: 276px;
                    width: 418px;
                    margin-top: 15px;
                    display:flex;
                    flex-direction: column;
                    margin-right: 15px;
                    .devBoxtitle{
                        height: 69px;
                        width: 100%;
                        display:flex;
                        .machineNo{
                            display:flex;
                            flex-direction: column;
                            justify-content:center;
                            align-items: center;
                            width: 145px;
                            height: 100%;
                            font-size: 20px;
                            color: #fff;
                        }
                        .machineStatus{
                            display:flex;
                            flex-direction: column;
                            justify-content:center;
                            align-items: center;
                            color: rgb(192, 192, 192);
                            font-size: 14px;
                            width: 115px;
                            height: 100%;
                        }
                        .machineStatus1{
                            display:flex;
                            flex-direction: column;
                            justify-content:center;
                            align-items: flex-start;
                            color: rgb(192, 192, 192);
                            font-size: 14px;
                            width: 115px;
                            height: 100%;
                        }
                        .machinelight{
                            display:flex;
                            flex-direction: column;
                            justify-content:center;
                            align-items: center;
                            width: 42px;
                            height: 100%;
                        }
                    }
                    .devBoxContent{
                        height: 207px;
                        width: 100%;
                        padding: 5px;
                        display:flex;
                        .devEchart{
                            display:flex;
                            flex-direction: column;
                            // justify-content:space-around;
                            align-items: center;
                            height: 100%;
                            width: 139px;
                            .devboxEchart{
                                padding-top: 10px;
                                width: 100%;
                                height: 120px;
                            }
                            .openRateNum{
                                color: #fff;
                                font-size: 20px;
                            }
                            .openRateName{
                                font-size: 14px;
                                color: rgb(194, 194, 194);
                            }
                        }
                        .devTimeRate{
                            height: 100%;
                            width: 268px;
                            .slicefig{
                                height: 20%;
                                padding: 15px 15px 0px 15px;
                                .sliceDetail{
                                    height: 50%;
                                    float: left;
                                    z-index: 1;
                                    cursor: pointer;
                                }
                            }
                            .pieTime{
                                width: 100%;
                                height: 80%;
                                color: #fff;
                                display:flex;
                                align-items: center;
                                .ivu-row{
                                    height: 100%;
                                    display: flex !important;
                                }
                                .darmfont{
                                    color: rgb(202, 202, 202);
                                }
                                span{
                                    font-size: 14px;
                                }
                                strong{
                                    width: 10px;
                                    height: 10px;
                                    display: inline-block;
                                    margin-right: 10px;
                                }
                                .iconGreen{
                                    background: rgb(48,195,104);
                                }
                                .iconYellow{
                                    background: rgb(243,154,0);
                                }
                                .iconRed{
                                    background: rgb(233,52,70);
                                }
                                .iconDark{
                                    background: rgb(109,149,181);
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}
</style>